<template>
  <view :class="['feature-card', type + '-card', { 'full-width': fullWidth }]">
    <view class="card-content">
      <view class="card-header">
        <text class="card-title">{{ title }}</text>
        <text v-if="recommended" class="card-tag">推荐</text>
      </view>
      <text class="card-desc">{{ description }}</text>
    </view>
    <view class="card-footer">
      <view v-if="buttonText" class="card-btn" @click="onButtonClick">
        {{ buttonText }} <text class="iconfont icon-right"></text>
      </view>
      <view :class="['card-icon', { 'heart-icon': type === 'emotion' }]">
        <text>{{ icon }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FeatureCard',
  props: {
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'default',
      validator: (value) => {
        return ['default', 'emotion', 'pressure', 'growth'].includes(value);
      }
    },
    icon: {
      type: String,
      default: '✨'
    },
    buttonText: {
      type: String,
      default: ''
    },
    recommended: {
      type: Boolean,
      default: false
    },
    fullWidth: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onButtonClick() {
      this.$emit('click');
    }
  }
};
</script>

<style>
.feature-card {
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260rpx;
  width: 100%;
  box-sizing: border-box; /* 确保padding不会增加宽度 */
  overflow: hidden; /* 防止内容溢出 */
}

.full-width {
  grid-column: span 2;
  width: 100%;
}

.emotion-card {
  background-color: #4c1d95;
}

.pressure-card {
  background-color: #92400e;
}

.growth-card {
  background-color: #1e40af;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
}

.card-tag {
  font-size: 22rpx;
  background-color: #4f46e5;
  padding: 4rpx 16rpx;
  border-radius: 50rpx;
}

.card-desc {
  font-size: 24rpx;
  color: #d1d5db;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 30rpx;
}

.card-btn {
  background-color: rgba(79, 70, 229, 0.4);
  padding: 10rpx 30rpx;
  border-radius: 50rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}

.card-icon {
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
}

.heart-icon {
  width: 120rpx;
  height: 120rpx;
  background-color: #be185d;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>